<template>
  <section class="todoapp">
    <ToduHeader @add="addTodo"></ToduHeader>
    <ToduMain :list="list" @del="handDel" @editChk="editList"></ToduMain>
    <ToduFooter
      :remainder="noEndCount"
      @loading="loadingList"
      @all="allList"
      @end="endList"
      @delEnd="delEndList"
    ></ToduFooter>
  </section>
</template>

<script>
import ToduFooter from "@/components/ToduFooter.vue";
import ToduMain from "@/components/ToduMain.vue";
import ToduHeader from "@/components/ToduHeader.vue";
export default {
  data() {
    return {
      //list用于展示数据
      list: [
        // isDone: 是否完成
        { id: 12, name: "吃饭", isDone: false },
        { id: 14, name: "听歌", isDone: true },
        { id: 23, name: "洗澡", isDone: true },
        { id: 34, name: "睡觉", isDone: false },
        { id: 35, name: "游戏", isDone: false },
      ],

      //baseList用于保存基本数据，
      baseList: [
        { id: 12, name: "吃饭", isDone: false },
        { id: 14, name: "听歌", isDone: true },
        { id: 23, name: "洗澡", isDone: true },
        { id: 34, name: "睡觉", isDone: false },
        { id: 35, name: "游戏", isDone: false },
      ],
    };
  },
  components: {
    ToduFooter,
    ToduMain,
    ToduHeader,
  },
  methods: {
    handDel(id) {
      //将两组数据全部清除，否则会出现切换展示内容的时候删除不成功的问题
      this.list = this.list.filter((item) => item.id != id);
      this.baseList = this.baseList.filter((item) => item.id != id);
      //this.list = this.baseList;
    },
    addTodo(todo) {
      // 数组.push向数组结尾插入数据   数组.unshift 向数组开头插入数据
      //接收到头部组件数据后,添加数据
      this.baseList.push({
        id: Date.now(),
        name: todo,
        isDone: false,
      });
      this.list = this.baseList;
    },
    editList(id) {
      //将两组数据全部修改，否则会出现切换展示内容的时候切换不成功的问题
      this.list = this.list.map((item) => {
        if (item.id === id) {
          return { id: id, name: item.name, isDone: !item.isDone };
        } else {
          return item;
        }
      });
      this.baseList = this.baseList.map((item) => {
        if (item.id === id) {
          return { id: id, name: item.name, isDone: !item.isDone };
        } else {
          return item;
        }
      });
      //this.list = this.baseList;
    },
    //展示正在进行中的任务
    loadingList() {
      this.list = this.baseList.filter((item) => {
        return item.isDone === false;
      });
    },
    //展示完成的任务
    endList() {
      this.list = this.baseList.filter((item) => item.isDone === true);
    },
    //展示所有任务
    allList() {
      this.list = this.baseList;
    },
    //删除所有完成任务
    delEndList() {
      this.baseList = this.baseList.filter((item) => item.isDone == false);
      this.list = this.baseList;
    },
  },
  computed: {
    //计算还剩余几个
    noEndCount() {
      let i = 0;
      this.list.forEach((item) => {
        if (item.isDone === false) {
          i += 1;
        }
      });
      return i;
    },
  },
};
</script>

<style></style>
